<template>
  <div>
    <div class="ivu-mb-16" v-if="routers">
      <template v-for="item in projecttagalllists">
        <tag
          color="warning"
          v-if="myprotaglist.indexOf(item.id) > -1"
          :value="item.id"
          @on-close="handleClose(item.id, 2)"
          :closable="isShowX"
          :key="item.id"
          >{{ item.tags_name }}</tag
        >
      </template>
      <template v-for="item in selftagalllists">
        <tag
          color="primary"
          v-if="myselftaglist.indexOf(item.id) > -1"
          :value="item.id"
          @on-close="handleClose(item.id, 1)"
          :closable="isShowX && bools"
          :key="item.id"
          >{{ item.tags_name }}</tag
        >
      </template>
      <Button
        v-hasC="btnShow[4]"
        icon="ios-add"
        type="primary"
        size="small"
        @click="addTag = true"
      />
    </div>

    <Modal
      v-model="addTag"
      title="编辑标签"
      :mask-closable="false"
      width="600"
      @on-cancel="handleCancel()"
    >
      <Input
        v-model="searchTag"
        placeholder="请输入关键词进行搜索"
        clearable
      ></Input>
      <!--选中部门标签-->
      <template v-for="item in projecttagalllist">
        <tag
          size="large"
          color="warning"
          checkable
          v-if="projecttaglist.indexOf(item.id) > -1"
          checked
          :key="item.id"
          @on-change="chagetag(item.id, 2)"
          >{{ item.tags_name }}</tag
        >
      </template>
      <!--选中个人标签-->
      <template v-for="item in selftagalllist">
        <tag
          size="large"
          color="primary"
          checkable
          v-if="selftaglist.indexOf(item.id) > -1"
          checked
          :key="item.id"
          @on-change="chagetag(item.id, 1)"
          >{{ item.tags_name }}</tag
        >
      </template>

      <Form>
        <FormItem v-if="bools">
          <h4>个人标签</h4>
          <tag
            size="large"
            class="edittag"
            color="primary"
            checkable
            :checked="selftaglist.indexOf(item.id) > -1"
            v-for="item in selftagalllist"
            :key="item.id"
            @on-change="chagetag(item.id, 1)"
            v-if="!searchTag || item.tags_name.includes(searchTag)"
          >
            {{ item.tags_name }}
          </tag>
          <Button
            class="ivu-mr"
            type="primary"
            ghost
            icon="md-add"
            @click="modal = true"
            >添加标签</Button
          >
        </FormItem>
        <FormItem>
          <h4>部门标签</h4>
          <tag
            size="large"
            class="edittag"
            color="warning"
            checkable
            :checked="projecttaglist.indexOf(item.id) > -1"
            v-for="item in projecttagalllist"
            :key="item.id"
            @on-change="chagetag(item.id, 2)"
            v-if="!searchTag || item.tags_name.includes(searchTag)"
          >
            {{ item.tags_name }}
          </tag>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleCancel()">取消</Button>
        <Button type="primary" :loading="subloading" @click="handleSubmit()"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="modal"
      title="新增个人标签"
      @on-cancel="cancel('editmodal')"
    >
      <Form ref="editmodal" :model="editparams" :rules="Rules">
        <FormItem prop="tags_name">
          <Input v-model="editparams.tags_name" type="text"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel('editmodal')">取消</Button>
        <Button
          type="primary"
          :loading="subloading"
          @click="submit('editmodal')"
          >确定</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  patientindextagsconditionlist,
  patientindexedittagsv2,
  basetagsselfcreate,
} from "@/api/hqapi/tags";
// import template from '../search/template.vue';
export default {
  // components: { template },
  name: "tags",
  props: {
    btnShow: {
      type: Array,
      require: true,
    },
    data: {
      type: Object,
      require: true,
    },
    bools: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      modal: false,
      routers: true,
      addTag: false,
      searchTag: "", // 搜索的标签
      projecttagalllist: [],
      project_tags: [], // 接口原数据【部门标签】
      selftagalllist: [],
      self_tags: [], // 接口原数据【个人标签】
      projecttagalllists: [],
      selftagalllists: [],
      taglist: [],
      // taglists: [],
      selftaglist: [], // 个人
      projecttaglist: [], // 部门
      tags: [],
      myprotaglist: [],
      myselftaglist: [],
      subloading: false,
      params: { patient_user_id: "", self_ids: "", project_ids: "" },
      Rules: {
        tags_name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      editparams: { tags_name: "" },
    };
  },
  computed: {
    isShowX() {
      // console.log(this.btnShow,'this.btnShow');
      let id = this.btnShow[5].name;
      let arr = JSON.parse(localStorage.getItem("menus")).action;
      let flag = arr.find((ee) => {
        return ee.marking === id;
      });
      return flag ? true : false;
    },
  },
  mounted() {
    // if (this.$route.path === "/business/publicList"||this.$route.path === "/business/fishPond") {
    //     this.routers = false
    // }
    this.tags = this.data.tags;
    this.params.patient_user_id = this.data.id;
    this.projecttagalllists = this.data.tags.project_list;
    this.selftagalllists = this.data.tags.self_list;
    // console.log(this.data.tags.project_list,'data');
    this.selftaglist = [];
    this.projecttaglist = [];
    // this.taglist = []
    this.myprotaglist = [];
    this.myselftaglist = [];
    if (this.data.tags && this.data.tags.project_ids) {
      this.projecttaglist.push(...this.data.tags.project_ids);
      this.myprotaglist.push(...this.data.tags.project_ids);
      // console.log(this.myprotaglist,'mu');
    }
    if (this.data.tags && this.data.tags.self_ids) {
      this.selftaglist.push(...this.data.tags.self_ids);
      this.myselftaglist.push(...this.data.tags.self_ids);
      // console.log(this.myselftaglist,'mu');
    }
    this.askData();
  },
  methods: {
    // 搜索
    changeClear() {
      //
    },
    askData() {
      patientindextagsconditionlist().then((res) => {
        this.projecttagalllist = res.project_tags;
        this.project_tags = res.project_tags;
        this.selftagalllist = res.self_tags;
        // console.log(this.selftagalllist,'this.selftagalllist');
        this.self_tags = res.self_tags;
      });
    },
    handleClose(id, status) {
      this.chagetags(id, status);
      this.handleSubmits();
    },
    chagetag(id, status) {
      if (status === 1) {
        if (this.selftaglist.indexOf(id) > -1) {
          this.selftaglist = this.selftaglist.filter((n) => {
            return n !== id;
          });
        } else {
          this.selftaglist.push(id);
        }
      } else {
        if (this.projecttaglist.indexOf(id) > -1) {
          this.projecttaglist = this.projecttaglist.filter((n) => {
            return n !== id;
          });
        } else {
          this.projecttaglist.push(id);
        }
      }
    },
    chagetags(id, status) {
      if (status === 1) {
        if (this.myselftaglist.indexOf(id) > -1) {
          this.myselftaglist = this.myselftaglist.filter((n) => {
            return n !== id;
          });
        } else {
          this.myselftaglist.push(id);
        }
      } else {
        if (this.myprotaglist.indexOf(id) > -1) {
          this.myprotaglist = this.myprotaglist.filter((n) => {
            return n !== id;
          });
        } else {
          this.myprotaglist.push(id);
        }
      }
    },
    handleCancel() {
      // console.log(this.myprotaglist,'this.myprotaglist');
      this.projecttaglist = JSON.parse(JSON.stringify(this.myprotaglist));
      this.selftaglist = JSON.parse(JSON.stringify(this.myselftaglist));
      this.addTag = false;
    },
    handleSubmit() {
      this.params.self_ids = "";
      this.params.project_ids = "";
      let self_ids = [];
      for (let item of this.selftagalllist) {
        if (this.selftaglist.indexOf(item.id) > -1) {
          self_ids.push(item.id);
        }
      }
      let project_ids = [];
      for (let item of this.projecttagalllist) {
        if (this.projecttaglist.indexOf(item.id) > -1) {
          project_ids.push(item.id);
        }
      }
      this.params.self_ids = self_ids.join(",");
      this.params.project_ids = project_ids.join(",");
      this.subloading = true;
      patientindexedittagsv2(this.params)
        .then((res) => {
          this.$emit("askData");
          this.myprotaglist = JSON.parse(JSON.stringify(this.projecttaglist));
          this.myselftaglist = JSON.parse(JSON.stringify(this.selftaglist));
          this.addTag = false;
          this.subloading = false;
        })
        .catch(() => {
          this.subloading = false;
        });
    },
    handleSubmits() {
      this.params.self_ids = "";
      this.params.project_ids = "";
      let self_ids = [];
      for (let item of this.selftagalllist) {
        if (this.myselftaglist.indexOf(item.id) > -1) {
          self_ids.push(item.id);
        }
      }
      let project_ids = [];
      for (let item of this.projecttagalllist) {
        if (this.myprotaglist.indexOf(item.id) > -1) {
          project_ids.push(item.id);
        }
      }
      this.params.self_ids = self_ids.join(",");
      this.params.project_ids = project_ids.join(",");
      patientindexedittagsv2(this.params).then((res) => {
        this.$emit("askData");
        this.handleCancel();
        this.addTag = false;
      });
    },
    cancel(name) {
      this.$refs[name].resetFields();
      this.editparams.tags_name = "";
      this.modal = false;
    },
    submit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.subloading = true;
          basetagsselfcreate({ tags_name: this.editparams.tags_name }).then(
            (res) => {
              this.logs(res);
              this.selftaglist.push(res.id + "");
              this.$Message.success("新增个人标签成功");
              this.modal = false;
              this.askData();
              this.subloading = false;
            }
          );
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.edittag {
  border: 1px solid gray !important;
}
</style>
